<template>
    <!-- 
        menu 菜单
        menu-item 菜单项
        sub-menu 子菜单
        mode 模式
            menu-item 下拉菜单
            horizontal 水平菜单
            vertical 垂直菜单

        属性：
        menu
            default-active 默认选中
            mode="horizontal"  菜单模式 默认垂直  horizontal 水平  vertical 垂直
            background-color 背景颜色
            text-color 文字颜色 active-text-color 选中时的颜色
            router  是否使用路由模式 vue-router的模式 ,启用后，点击菜单项会进行跳转

        sub-menu   子菜单
            index   索引   默认值是索引值 String类型/Null类型
        
        menu-item  菜单项
            index   索引   默认值是索引值 String类型
            disabled  是否禁用  boolean类型
    -->

    <div class="header">
        <div class="logo">logo</div>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
            background-color="#333" text-color="#fff" active-text-color="#10b041" router>
            <el-menu-item index="/" :class="{ active: isActive('/') }">首页</el-menu-item>
            <el-menu-item index="/dest" :class="{ active: isActive('/dest') }">目的地</el-menu-item>
            <el-menu-item index="/community" :class="{ active: isActive('/community') }">社区</el-menu-item>
            <el-menu-item index="/travel" :class="{ active: isActive('/travel') }">行程助手</el-menu-item>
            <el-submenu index="5">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
                <el-submenu index="2-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="2-4-1">选项1</el-menu-item>
                    <el-menu-item index="2-4-2">选项2</el-menu-item>
                    <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
            </el-submenu>
        </el-menu>
        <div class="header-right">
            <template v-if="userInfo.username">
                <span>{{ userInfo.username }}</span>
                <span @click="logout">退出登录</span>
            </template>
            <router-link to="/login" style="color:azure" v-else>登录</router-link>
        </div>
    </div>

</template>

<script>
import { mapState } from 'vuex';

export default {
    name: 'HeaderView',
    data() {
        return {
            activeIndex: '/'
        }
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log('选中菜单:', key, keyPath);
            // 可在此处添加跳转逻辑或其他操作
        },
        logout() {
            this.$store.dispatch('user/deleteUserInfo')
            this.$router.push('/')
            this.activeIndex = '/'
        },
        isActive(path) {
            return this.$route.path === path
        }
    },
    computed: {
        ...mapState('user', ['userInfo'])
    },
    created() {
        console.log(this.$route);
        this.activeIndex = this.$route.path;
    }
}
</script>

<style scoped>
.header {
    display: flex;
    background-color: #333;
    color: white;

    .logo,
    .header-right {
        padding: 0 10px;
        background-color: #333;
        line-height: 60px;
    }

    .el-menu-demo {
        flex: 1;
        font-size: 16px;
        font-weight: 700px;

        .el-menu--horizontal>.el-menu-item {
            height: 40px;
            line-height: 40px;
        }
    }

    .el-menu.el-menu--horizontal {
        border-bottom: none;
    }
}
</style>